<template>
	<view class="container">
		<view class="banner">
			<swiper :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item>
					<view class="swiper-item">
						<image :src="$img_path('/mall/2.png')" mode="aspectFill"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<view class="g-list">
			<view class="g-item" v-for="(item,i) in groups" :key="item.id" @click.stop="goodsClick(item)">
				<mallItemBox :goodsDetail="item" :styleType="2" :title_row="2"
					:imageStyle="{width:'260rpx',height:'260rpx'}" style_2_pl="12rpx" noClick>
					<text slot="center" style="margin-top: 16rpx;display: block;">已拼{{item.groups_num}}件</text>
					<view slot="priceBox" class="price-box">
						<view class="left">
							<view class="price"><text>拼团价¥ </text>{{item.price}}</view>
							<!-- <view class="n_price">
								¥56.00
							</view> -->
						</view>
						<button>去拼团</button>
					</view>
				</mallItemBox>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		listsNew
	} from '@/utils/api/mallApi.js'
	import mallItemBox from '@/components/service-box/mall-item-box.vue'
	export default {
		components: {
			mallItemBox
		},
		data() {
			return {
				page: 1,
				groups: [],
				total: 0,
				last_page: 0
			};
		},
		onLoad() {
			this.getindexGroups()
		},
		methods: {
			// 拼团
			getindexGroups() {
				listsNew({
					type: 'groups',
					page: this.page
				}).then(res => {
					if (res.data.current_page == 1) {
						this.groups = res.data.data
					} else {
						this.groups = [...this.groups, ...res.data.data]
					}
					this.total = res.data.total
					this.last_page = res.data.last_page
				})
			},

			goodsClick(data) {
				console.log(data);
				uni.navigateTo({
					url: `/pagesMall/group_buying/detail?id=${data.id}`,
				})
			}
		},
		onReachBottom(e) {
			this.page++
			if (this.page < this.last_page) {
				this.getindexGroups()
			}
		}
	}
</script>

<style>
	page {
		background-color: #ffffff;
	}
</style>
<style lang="scss" scoped>
	.container {
		padding: 20rpx 22rpx 0;
		box-sizing: border-box;

		.banner {
			width: 100%;
			height: 360rpx;

			swiper {
				width: 100%;
				height: 100%;

				swiper-item {
					width: 100%;
					height: 100%;
				}

				.swiper-item {
					width: 100%;
					border-radius: 20rpx;
					overflow: hidden;

					image {
						width: 100%;
						height: 360rpx;
					}
				}
			}
		}

		.g-list {
			.g-item {
				padding: 20rpx 0;
				border-bottom: 2rpx solid #F8F8F8;

				.price-box {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding-top: 12rpx;

					.left {
						display: flex;
						align-items: flex-end;

						.price {
							font-weight: bold;
							font-size: 44rpx;
							color: #FF2E2E;
							line-height: 40rpx;

							text {
								font-size: 24rpx;
							}
						}

						.n_price {
							font-weight: 400;
							font-size: 24rpx;
							color: #999999;
							line-height: 34rpx;
							text-decoration: line-through;
							margin-top: 6rpx;
							margin-left: 14rpx;
						}
					}

					button {
						width: 124rpx;
						height: 60rpx;
						background: linear-gradient(136deg, #FFA233 0%, #FB4C4C 100%);
						border-radius: 8rpx 8rpx 8rpx 8rpx;
						font-weight: bold;
						font-size: 28rpx;
						color: #FFFFFF;
						line-height: 60rpx;
					}
				}
			}
		}
	}
</style>